<script setup>
import { useRouter } from "vue-router";
import { postDelete } from "@/api/user.js";
import useLoadingStore from "@/store/modules/loadingStore";
import useInstructionStore from "@/store/modules/instructionList.js";
import { showConfirmDialog, showNotify } from "vant";

const loadingStore = useLoadingStore();

const router = useRouter();

const tableData = computed(() => {
  return useInstructionStore().list;
});
const finished = ref(true);

const show = ref(false);
const actions = ref([{ name: "编辑" }, { name: "删除" }, { name: "查看警告" }]);

const rowItem = ref({});
const Index = ref(0);

const onSelect = item => {
  if (item.name === "编辑") {
    router.push({
      path: "/commandPage/edit",
      query: {
        ...rowItem.value
      }
    });
  }
  if (item.name === "删除") {
    return showConfirmDialog({
      title: "提示",
      message: `是否确认删除【${rowItem.value.command}】监控命令`
    })
      .then(() => {
        const formData = new FormData();
        formData.append("id", rowItem.value.id);
        postDelete(formData).then(data => {
          if (data.code === 200) {
            showNotify({
              type: "success",
              message: "删除成功",
              duration: 3 * 1000
            });
            useInstructionStore().getData();
          }
        });
      })
      .catch(() => {
        showNotify({
          type: "warning",
          message: "已取消",
          duration: 3 * 1000
        });
      });
  }
  if (item.name === "查看警告") {
    router.push({
      path: "/commandPage/warn",
      query: {
        rowItem: JSON.stringify(rowItem.value)
      }
    });
    useInstructionStore().setRead(Index.value);
  }

  show.value = false;
};

const onClick = (item, index) => {
  if (item.answer) {
    actions.value = [{ name: "编辑" }, { name: "删除" }, { name: "查看警告" }];
  } else {
    actions.value = [{ name: "编辑" }, { name: "删除" }];
  }
  rowItem.value = item;
  Index.value = index;
  show.value = true;
};
</script>

<template>
  <div>
    <van-nav-bar title="监控命令" left-arrow @click-left="router.go(-1)">
      <template #right>
        <van-badge
          :content="0"
          :show-zero="false"
          @click="router.push('/commandPage/add')"
        >
          <van-icon name="plus" size="18" color="#333" />
        </van-badge>
      </template>
    </van-nav-bar>

    <van-list
      v-model:loading="loadingStore.isLoading"
      :finished="finished"
      finished-text="没有更多了"
    >
      <van-cell
        v-for="(item, index) in tableData"
        :key="index"
        is-link
        @click="onClick(item, index)"
      >
        <template #title>
          <div style="display: flex; justify-content: space-between">
            {{ item.command }}
            <van-tag
              type="danger"
              size="small"
              plain
              v-if="item.isRead == false"
              >警告</van-tag
            >
          </div>
        </template>
      </van-cell>
    </van-list>

    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
      @cancel="show = false"
    />
  </div>
</template>

<style scoped lang="scss"></style>
